<template>
	<view class="content">
		<div class="list2">
			<div>打分</div>
		<u-rate active-color="#FFD100" size="32"  :disabled="false" v-model="number">
		</u-rate>
		</div>
		<div class="list">
			<div>评价</div>
			<u-input v-model="value" type="textarea" :border="border" height="150" placeholder="请输入评价内容" />
			<div style="display: flex;">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :multiple="true"
					:maxCount="3" width="106rpx" height="106rpx" :deletable="true" :previewImage="true" :custom-btn="true">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<img src="../../static/img/pic.png" mode="" style="width: 106rpx;height: 106rpx;margin-right: 40rpx;"></img>
					</view>
				
				</u-upload>
				
				
				<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" :multiple="true"
					:maxCount="3" width="106rpx" height="106rpx" :deletable="true" :previewImage="true" :custom-btn="true">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<img src="../../static/img/video.png" mode="" style="width: 106rpx;height: 106rpx;margin-left:4rpx;"></img>
					</view>
				
				</u-upload>
			</div>
		
		</div>
		<div class="list1">
          <u-checkbox v-model="init" shape="circle">匿名评价</u-checkbox> 

		</div>
		<img src="../../static/img/icon3.png" alt="" class="refund">

	</view>

</template>

<script>
	export default {
		data() {
			return {
				number:'',//初始化默认星星数量
				init:"",
				value: '',
				borser:false,
				value1: '',
				// 上传图片
				fileList1: [],
				fileList2: [],


			}
		},
		methods: {
			//删除图片
			deletePic(e) {
				console.log(e);
				this[`fileList${e.name}`].splice(e.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event, '这里是什么什么')
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result, 1111111)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 上传图片
			uploadFilePromise(url) {
				console.log('执行了 url', url)
				return new Promise((resolve, reject) => {
					// this.$httpFormData.post(
					// 		this.$myApi.upload, 
					// 		{filePath: url}, {
					// 			header: {
					// 				'Content-Type': 'application/x-www-form-urlencoded;charset=utf8',
					// 				"Authorization": uni.getStorageSync('token') || 1,
					// 				Clientid: uni.getStorageSync('clientID') || 1
					// 			},
					// 		}
					// 	)
					// 	.then(tes => {
					// 		console.log('收藏返回的信息', res, res.data);
					// 			setTimeout(() => {
					// 				resolve(res.data.data)
					// 			}, 1000)
					
					// 	})
					// 	.catch(err => {})
					
				})
			},
		}


	

	}
</script>
<style>
	page {
		background-color: #F6F9FF;
	}
</style>
<style lang="scss" scoped>
	.content {
		width: 100%;

		.list {
			width: 690rpx;
			height: 369rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			margin-left: 30rpx;
			margin-top: 20rpx;
			padding-left: 20rpx;
			padding-top: 20rpx;
			margin-bottom: 30rpx;

		}

		.list1 {
			width: 690rpx;
			height: 74rpx;
			line-height: 70rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			opacity: 1;
			margin-left: 30rpx;
			margin-top: 20rpx;
			padding-left: 30rpx;
			
		}
		.list2{
			width: 690rpx;
			height: 99rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			// opacity: 1;
			margin-left: 30rpx;
			// margin-top: 20rpx;
			display: flex;
			padding-left: 20rpx;
			padding-top: 30rpx;
			margin-bottom: 49px;
		}

		.refund {
			width: 576rpx;
			height: 82rpx;
			margin-top: 450rpx;
			margin-left: 87rpx;
		}

	}
	
	::v-deep {
		.u-list-item {
				// margin-top: 5rpx;
		}
	}
	
</style>

<style>
	page {
		background-color: #EFEFEF;
	}
</style>
